<template>
  <div class="Recordingscreen">
    <p><el-link type="primary" style="margin-left:92%" @click="dialogFormVisible = true">上传录屏</el-link></p>
     <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'#EBEEF5'}"
      >
      <el-table-column prop="name" label="用户名"></el-table-column>
      <el-table-column prop="classid" label="班级"></el-table-column>
      <el-table-column prop="type" label="考试类型"></el-table-column>
      <el-table-column prop="filepath" label="百度网盘地址" width = "220">
        <template slot-scope="scope"><el-link type="primary" :href = "scope.row.filepath">{{scope.row.filepath}}</el-link></template>
      </el-table-column>
      <el-table-column prop="filecode" label="网盘密码"></el-table-column>
      <el-table-column prop="createtime" label="上传时间">
        <template slot-scope="scope">{{$getDate(scope.row.createtime*1)}}</template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
    </el-table>

    <!-- 添加 -->
    <div>
      <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="网盘地址" :label-width="formLabelWidth">
            <el-input v-model="form.filepath" autocomplete="off" style="width:215px"></el-input>
          </el-form-item>
          <el-form-item label="是否加密" :label-width="formLabelWidth">
              <el-radio v-model="isPwd" label="1">是</el-radio>
              <el-radio v-model="isPwd" label="2">否</el-radio>
          </el-form-item>
          
           <el-form-item v-if="isPwd==='1'" label="网盘密码" :label-width="formLabelWidth">
            <el-input v-model="form.filecode" autocomplete="off" style="width:215px"></el-input>
          </el-form-item>

          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-select v-model="form.classid" placeholder="请选择" style="width:215px">
              <el-option
                v-for="item in classlist"
                :key="item.key"
                :label="item.classid"
                :value="item.classid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考试类型" :label-width="formLabelWidth">
              <el-radio v-model="form.type" label="周考">周考</el-radio>
              <el-radio v-model="form.type" label="月考"></el-radio>
          </el-form-item>

           <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="form.remarks" autocomplete="off" style="width:215px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false; this.form = {}">取 消</el-button>
          <el-button menu="primary" @click="open">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 添加结束 -->

    <!-- 分页 -->
    <div class="pagination">
     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,6,8]" 
            :page-size="pagesize"        
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">   
    </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>


<script>
export default {
  data(){
    return {
      tableData:[],
      classlist:[],
      jiruid:'',
      classid:"",
      examType:['周考','月考'],
      upLodeTime:new Date().getTime(),
      name:'',
      isPwd:'',
      dialogFormVisible:false,
      formLabelWidth: '120px',
      form: {
        filepath:"",
        filecode:"",
        classid:'',
        type:'',
        remarks:"",
        userid:sessionStorage.userid,
        name:sessionStorage.user,
      },
    pagesize:5,
    currentPage:1, 
    }
  },
  mounted(){
    this.initData()
  },
  methods:{
    initData(){
      this.$httpAxios(this.$api.TEMP_LIST(),res=>{
        this.tableData = res.data.arr
        this.classlist = res.data.classlist
      })
    },
    open(){
      if(this.form.filepath==='') return this.$message({message:'文件地址不能为空',type: 'success'});
      if(/^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/.test(this.form.filepath)){
        console.log(111);
      }
      if(this.form.filecode==='') return this.$message({message:'密码不能为空',type: 'success'});
      if(this.form.classid==='') return this.$message({message:'班级不能为空',type: 'success'});
      if(this.form.type==='') return this.$message({message:'考试类型不能为空',type: 'success'});
      
      this.$httpAxios(this.$api.TEMP_ADD_LIST(this.form),res=>{
      this.$message({message: res.msg,type: 'success'});
      this.initData()
        
      })   
      this.form = {}
      this.dialogFormVisible = false;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 每张显示的个数
    handleSizeChange(size) {
      this.pagesize = size;
    },
  }
}
</script>